<template>
	<view class="home">

		<scroll-view class="rel" @scroll="onScroll" scroll-y>
		
			<swiper autoplay circular class="bgImg boxS">
				<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250626/b254ab6a67498be4feb8182acce21fbc.png"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item>
			<!-- 	<swiper-item>
					<image class="w-20"
						src="https://img.quexiaqp.com/uploads/20250726/48ccd1806911b2d1223810dc59f3559e.jpg"
						mode="widthFix" @click="bannerClick()"></image>
				</swiper-item> -->
			</swiper>
			
			<view class="searchbox r5 px8 pb12 bgff mx14 m6 px10 py6">
				<image class="bgImage" 
				src="https://img.quexiaqp.com/uploads/20250626/5e35ab2d2feda3625cb1f856b04dd2da.png" 
				mode="widthFix"></image>
			</view>
			
			<view class="list bgff px15 py14">
				<view class="fs16 bold6">意向城市</view>
				<view class="inp borb pt10 mb12 flex flexC" >
					<input  v-model="city" class="flex1 pb4" type="text" placeholder="填写所在城市">
				</view>
				<view class="fs16 bold6">您的姓名</view>
				<view class="inp borb pt10 mb12 flex flexC">
					<input v-model="name" class="flex1 pb4" type="text" placeholder="请填写您的姓名">
				</view>
				<view class="fs16 bold6">您的电话</view>
				<view class="inp borb pt10 mb12 flex flexC">
					<input v-model="mobile" class="flex1 pb4" type="number" placeholder="请填写您的电话">
				</view>
				
				
				<!-- <view class="fs16 bold6">是否已选好场地</view>
				<view class="inp borb pt18 mb12 flex flexC">
					<uni-data-checkbox v-model="isLocal" :localdata="rangeLocal" @change="changeLocal"></uni-data-checkbox>
				</view> -->
		
				<view class="fs16 bold6">投资预算</view>
				<view class="inp borb pt10 mb12 flex flexC">
					<uni-data-checkbox v-model="isBudget" :localdata="rangeBudget" @change="changeBudget"></uni-data-checkbox>
				</view>
		
				
				<view class="fs16 bold6">您咨询的项目</view>
				<view class="inp borb pt10 mb12 flex flexC">
					<uni-data-checkbox v-model="isProgram" :localdata="rangeProgram" @change="changeProgram"></uni-data-checkbox>
				</view>
				
				<view v-if="ref_mobile != ''" class="fs16 bold6">推荐人电话</view>
				<view v-if="ref_mobile != ''" class="inp borb pt10 mb12 flex flexC">
					<input v-model="ref_mobile" class="flex1 pb4" type="number" disabled="true">
				</view>
				
				<view class="fs16 bold6">留言建议(可不填)</view>
				<view class="inp borb pt10 mb12 flex flexC">
					<input v-model="mark" class="flex1 pb4" type="text" placeholder="请输入您的留言建议">
				</view>
				
				<view class="flex flexC flexB aliC">
					<view class="r40 py8 flex1 boxS my7 bor57 btn mx10" @click="contact">电话咨询</view>
					<view class="r40 py8 flex1 boxS my7 bgf6c btn mx10" @click="add">提交</view>
				</view>
			</view>
			
		</scroll-view>
		<newTab></newTab>
	</view>
	
</template>

<script>
	import newTab from '@/components/new-tabBar/new-tabBar.vue';

	export default {
		components: {
		    newTab
		},
		data() {
			return {
				currentPage: 'join',
				name: '',
				city: '',
				mobile: '',
				isLocal: 0,
				rangeLocal: [{"value": 0,"text": "是"	},{"value": 1,"text": "否"}],
				isBudget: 0,
				rangeBudget: [{"value": 0,"text": "10-20万"	},{"value": 1,"text": "20-30万"},{"value": 2,"text": "30-50万"},{"value": 3,"text": "50万以上"}],
				isProgram: 0,
				rangeProgram: [{"value": 0,"text": "棋牌"},{"value": 1,"text": "台球"},{"value": 2,"text": "KTV"},{"value": 3,"text": "城市区域代理"}],
				
				ref_mobile:'',
				mark:''
			}
		},
		onLoad(options) {
			if(options.scene){
				let scan_url = decodeURIComponent(options.scene);
				console.info("===扫码进入后的参数为1===" + scan_url);
				var index = scan_url.lastIndexOf("\/");
				var result = scan_url.substring(index + 1, scan_url.length);
				this.ref_mobile = result;
				
			}
			
			
			if(options.ref_mobile){
				this.ref_mobile = options.ref_mobile;
			}
			console.info("===扫码进入后的参数为3===" + this.ref_mobile);
		},

		methods: {
			changeBudget(e){
				console.log('e:',e);
			},
			changeProgram(e){
				console.log('====选择的咨询项目==>:',e.detail.value);
			},
			changeLocal(e){
				console.log('e:',e);
			},
	
			openLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						console.info(res)
						that.latitude = res.latitude;
						that.longitude = res.longitude;
	
						let regex =
							"(?<province>[^省]+省|.+自治区)(?<city>[^自治州]+自治州|[^市]+市|[^盟]+盟|[^地区]+地区|.+区划)(?<county>[^市]+市|[^县]+县|[^旗]+旗|.+区)?(?<town>[^区]+区|.+镇)?(?<village>.*)"
						let newAddress = res.address.match(regex);
						let group = newAddress.groups;
	
	
						that.province = group.province;
						that.city = group.city;
		
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				})
			},
	
	
			contact() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync("tel")
				})
			},
	
			add() {
				let that = this;
				if(this.city == ""){
					uni.showToast({
						icon:'none',
						title:'请输入您项目的所属城市'
					})
					return;
				}
				
				if(this.checkMobile(this.mobile) == false){
					uni.showToast({
						icon:'none',
						title:'请输入有效的联系号码'
					})
					return;
				}
				
				// if(this.isProgram.length < 1){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请至少选择一个咨询项目'
				// 	})
				// 	return;
				// }
	
				let param = {
					city: this.city,
					name: this.name,
					mobile: this.mobile,
					isLocal:this.isLocal,
					isBudget: this.isBudget,
					isProgram:this.isProgram,
					// isProgram: JSON.stringify(this.isProgram),
					// item:encodeURIComponent(itemList),
					org_id: uni.getStorageSync("orgId"),
					ref_mobile:this.ref_mobile,
					mark:this.mark,
					type:'qx'
				};
				
				uni.showLoading({
					icon: 'none',
					title: "提交中"
	
				})
				this.$api.addShopJoin(param).then(res => {
	
					// console.info(JSON.stringify(res));
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {
						this.$nextTick(() => {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						})
	
					} else {
	
					}
				})
			},
			checkMobile(phoneNumber) {
			  const regex = /^1[3-9]\d{9}$/;
			  return regex.test(phoneNumber);
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		position: relative;
		height: 100vh;
		
		.rel {
			position: relative;
			z-index: 1;
		}
		
		.bgImg {
			height: 324rpx;
			image {
				height: 100% !important;
			}
		}
		
		.searchbox {
			height:15%;
			position: relative;
			margin-top: -60rpx;
			z-index: 1;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */

			.bgImage {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
		.list{
			margin-top: 30%;
		}

	}
</style>